<!--
  ~ -
  ~  ============LICENSE_START=======================================================
  ~  Copyright (C) 2022 Nordix Foundation.
  ~  ================================================================================
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  ~
  ~  SPDX-License-Identifier: Apache-2.0
  ~  ============LICENSE_END=========================================================
  -->

<li [class.root]="isRoot()">
  <span class="input-info">
    <em class="sprite-new round-expand-icon" [class.open]="isExpanded" (click)="expandAndCollapse()"></em>
    <label class="input-label">{{name}}:</label> <em data-tests-id="input-type">{{resolveType()}}</em>
    <span class="sprite-new delete-btn" *ngIf="showInputDelete()" (click)="onInputDelete()"></span>
    <span class="sprite-new delete-btn" *ngIf="showListItemDelete()" (click)="onChildListItemDelete()"></span>
  </span>

  <ng-container *ngIf="isExpanded && showToscaFunctionOption">
    <form>
      <fieldset [disabled]="isViewOnly" >
        <input type="radio" name="hasGetFunctionValue"
              [(ngModel)]="isToscaFunction"
              [value]="false"
              (change)="onValueTypeChange()"/> Value
        <input type="radio" name="hasGetFunctionValue"
              [(ngModel)]="isToscaFunction"
              [value]="true"/> {{'TOSCA_FUNCTION_LABEL' | translate}}
      </fieldset>
    </form>
    <div *ngIf="isToscaFunction">
      <ul>
        <li>
          <div *ngIf="componentInstanceMap">
            <tosca-function
                            [property]="property"
                            [allowClear]="false"
                            [componentInstanceMap]="componentInstanceMap"
                            [customToscaFunctions]="customToscaFunctions"
                            (onValidityChange)="onToscaFunctionValidityChange($event)">
            </tosca-function>
          </div>
          <div *ngIf="!componentInstanceMap">
            <tosca-function
                            [property]="property"
                            [allowClear]="false"
                            [customToscaFunctions]="customToscaFunctions"
                            (onValidityChange)="onToscaFunctionValidityChange($event)">
            </tosca-function>
          </div>
        </li>
      </ul>
    </div>
  </ng-container>

  <div *ngIf="!isToscaFunction">
    <ng-container *ngIf="isTypeSimple(type.name)">
      <ul *ngIf="isExpanded">
        <li class="input-value">
          <ng-container *ngIf="isViewOnly">
            {{valueObjRef}}<em class="empty-value" *ngIf="valueObjRef !== false && !valueObjRef">{{'GENERAL_LABEL_EMPTY' | translate | lowercase}}</em>
          </ng-container>
          <input *ngIf="!isViewOnly && isTypeLiteral(type.name)" type="text" name="value"
                 [(ngModel)]="valueObjRef" (ngModelChange)="onValueChange($event)"/>
          <input *ngIf="!isViewOnly && isTypeNumber(type.name)" type="number"
                 [(ngModel)]="valueObjRef" (ngModelChange)="onValueChange($event)"/>
          <select *ngIf="!isViewOnly && isTypeBoolean(type.name)" [(ngModel)]="valueObjRef" (ngModelChange)="onValueChange($event)">
            <option [value]="true">{{'GENERAL_LABEL_TRUE' | translate}}</option>
            <option [value]="false">{{'GENERAL_LABEL_FALSE' | translate}}</option>
          </select>
        </li>
      </ul>
    </ng-container>
    <ng-container *ngIf="isTypeRange(type.name)">
        <ul *ngIf="isExpanded">
            <ng-container *ngFor="let value1 of [0, 1]; index as i">
                <li class="input-value">
                    <ng-container *ngIf="isViewOnly">
                        {{valueObjRef[i]}}
                    </ng-container>
                    <input type="text" *ngIf="!isViewOnly"
                    [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" />
                </li>
            </ng-container>
        </ul>
    </ng-container>
    <ng-container *ngIf="isTypeComplex(type.name)" >
        <ul *ngIf="isExpanded">
          <ng-container *ngFor="let property of this.type.properties">
            <app-input-list-item
                [name]="property.name"
                [type]="getDataType(property.type)"
                [dataTypeMap]="dataTypeMap"
                [valueObjRef]="valueObjRef ? valueObjRef[property.name] : undefined"
                [schema]="property.schema"
                [toscaFunction]="getToscaFunction(property.name)"
                [nestingLevel]="nestingLevel + 1"
                [isViewOnly]="isViewOnly"
                [showToscaFunctionOption]="showToscaFunctionOption"
                [allowDeletion]="allowDeletion"
                [componentInstanceMap]="componentInstanceMap"
                (onValueChange)="onPropertyValueChange($event)">
            </app-input-list-item>
          </ng-container>
        </ul>
    </ng-container>
    <ng-container *ngIf="isTypeList(type.name)">
      <ul *ngIf="isExpanded">
        <ng-container *ngFor="let value1 of valueObjRef; index as i; trackBy: trackByIndex">
          <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
            <ng-container *ngIf="isViewOnly">
              {{valueObjRef[i]}}
            </ng-container>
            <input type="text" *ngIf="!isViewOnly"
                  [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" />
            <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onListItemDelete(i)"></span>
          </li>
          <app-input-list-item *ngIf="!isTypeSimple(schema.property.type)"
              [name]="i+''"
              [type]="getDataType(schema.property.type)"
              [dataTypeMap]="dataTypeMap"
              [valueObjRef]="valueObjRef[i]"
              [schema]="buildSchemaGroupProperty()"
              [toscaFunction]="getToscaFunction(i)"
              [nestingLevel]="nestingLevel + 1"
              [listIndex]="i"
              [isListChild]="true"
              [isViewOnly]="isViewOnly"
              [allowDeletion]="allowDeletion"
              [componentInstanceMap]="componentInstanceMap"
              (onValueChange)="onPropertyValueChange($event)"
              (onChildListItemDelete)="onListItemDelete($event)">
          </app-input-list-item>
        </ng-container>
        <li class="input-value" *ngIf="!isViewOnly">
          <a class="add-btn" (click)="addListElement()">{{'INPUT_LIST_ADD_LIST_ENTRY' | translate}}</a>
        </li>
      </ul>
    </ng-container>
    <ng-container *ngIf="isTypeMap(type.name)">
      <ul *ngIf="isExpanded">
        <ng-container *ngFor="let key of getObjectEntries(valueObjRef); index as i">
          <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
            <label class="input-label">{{key}}:</label>
            <ng-container *ngIf="isViewOnly">
              {{valueObjRef[key]}}
            </ng-container>
            <input type="text" *ngIf="!isViewOnly" [(ngModel)]="valueObjRef[key]" (ngModelChange)="onMapValueChange()"/>
            <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onMapKeyDelete(key)"></span>
          </li>
          <app-input-list-item
              *ngIf="!isTypeSimple(schema.property.type)"
              [name]="key"
              [type]="getDataType(schema.property.type)"
              [dataTypeMap]="dataTypeMap"
              [valueObjRef]="valueObjRef[key]"
              [schema]="buildSchemaGroupProperty()"
              [toscaFunction]="getToscaFunction(key)"
              [isMapChild]="true"
              [nestingLevel]="nestingLevel + 1"
              [isViewOnly]="isViewOnly"
              [allowDeletion]="allowDeletion"
              [componentInstanceMap]="componentInstanceMap"
              (onValueChange)="onPropertyValueChange($event)"
              (onDelete)="onMapKeyDelete($event)">
          </app-input-list-item>
        </ng-container>
        <li class="input-value" *ngIf="!isViewOnly">
          <input type="text" [(ngModel)]="mapEntryName" placeholder="{{ 'INPUT_LIST_MAP_KEY_PLACEHOLDER' | translate }}"/>
          <a class="add-btn" (click)="addMapEntry()">{{ 'INPUT_LIST_ADD_MAP_ENTRY' | translate }}</a>
        </li>
      </ul>
    </ng-container>
  </div>
</li>